<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Title</title>
</head>
<body>
<canvas></canvas>

<script type="text/javascript">

    var canvas = document.createElement("canvas");
    canvas.width = 500;
    canvas.height = 400;
    canvas.style.border = '1px solid red';

    document.body.appendChild(canvas);

    var context = canvas.getContext("2d");

    context.moveTo( 10 , 10);
    context.lineTo( 10 , 40);
    context.lineTo( 40 , 40 );
    context.lineTo( 20 , 10 );
    context.lineTo( 10 , 10 );
    context.stroke();
    context.fill();


    context.moveTo( 60 , 60 );
    context.lineTo( 60 , 100 );
    context.lineTo( 100 , 100 );
    context.lineTo( 100 , 60 );
    context.lineTo( 60 , 60 );
    context.stroke();
    context.fill();


    context.moveTo( 200 , 200 );
    context.lineTo( 200 , 300 );
    context.lineTo( 300 , 300 );
    context.lineTo( 200 , 200 );
    context.stroke();
    context.fill();

</script>
</body>
</html>